<template>
  <div id="Cashier">
    <!-- 这是积分兑换商品，收银台 -->
      <header class="header_title">
        <paymentTitleBar :payTitle="payTitle"></paymentTitleBar>
      </header>
      <div class="cashier_subject" v-if="paymentBool">
        <div class="ca_order">
          <div class="ca_order_left">
            <i class="img_icon el-icon-check"></i>
            <div class="order_left_p">
              <p>请尽快付款！<br/></p>
            </div>
          </div>
          <div class="ca_order_right">
            <h4>应付金额：
              <span>{{orderInformation.IGoodsData.integral * orderInformation.IGoodsData.number || 0}}</span> 积分
              <div class="money" v-if="orderInformation.IGoodsData.price > 0"><span> + {{orderInformation.IGoodsData.price * orderInformation.IGoodsData.number}} </span>元</div>
            </h4>
            <span @click="orderChe">订单详情 <i class="el-icon-arrow-down"></i></span>
          </div>
        </div>
        <div class="ca_show" v-show="orderBool">
          <p>收货地址：{{orderInformation.ShippingAddress.province}} {{orderInformation.ShippingAddress.city}} {{orderInformation.ShippingAddress.area}} {{orderInformation.ShippingAddress.address}}
            <b class="text_b"></b>收货人： {{orderInformation.ShippingAddress.realname}}<b class="text_b"></b> {{orderInformation.ShippingAddress.mobile | coverUp}}
          </p>
          <div class="ca_shop">商品名称：</div>
          <div class="table_div">{{orderInformation.IGoodsData.title}}</div>
        </div>
        <div class="ca_payment">
          <h4>请选择付款方式</h4>
          <ul>
            <li><button @click="weixin" :disabled='disabled'><img src="./../../../public/img/weixin.jpg" alt="" ></button></li>
            <li><button @click="zhifubao" :disabled='disabled'><img src="./../../../public/img/zhifubao.jpg" alt="" ></button></li>
            <li><button @click="yinlian" :disabled='disabled'><img src="./../../../public/img/yinlian.jpeg" alt="" ></button></li>
          </ul>
        </div>
      </div>
      <div class="select_products" v-else>
        <img src="../../../public/img/saleoff-mitu.png" alt="">
        <h3>没有付款订单信息，请去选择商品付款！</h3>
        <div><router-link to="/">去首页</router-link>|<router-link to="/shopping">返回购物车</router-link></div>
      </div>
      <!-- 付款二维码 -->
      <el-dialog :title="PaymentTitle" center :append-to-body="true" :close-on-click-modal='false' :close-on-press-escape='false' :visible.sync="dialogTableVisible" @close="closeQrCode" class="dialog_f">
        <div id="qrcode" ref="qrcode" ></div>
      </el-dialog>
      <!-- <h1>这里是收银台</h1> -->
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';  // 引入qrcode
import paymentTitleBar from '@/components/PaymentTitleBar';
export default {
  data () {
    return {
      payTitle: {title:"收银台", id:"pointsPayment"}, // 头部标题
      orderInformation: {},  // 积分支付订单信息

      PaymentTitle: '',   // 支付标题
      paymentBool: true,  // 是否有订单付款，有订单付款就显示，没有就不显示
      // userName: "", //用户名
      orderBool: false,  //订单的显示隐藏
      // interval: null, // 订单倒计时
      // countDownList: {  // 倒计时时间
      //   hou: '00',
      //   min: '00',
      //   sec: '00'
      // },  
      // actEndTime: 36000,  // 付款时间，秒数
      
      dialogTableVisible: false,  //是否显示付款二维码
      // orderlist: [],  //商品列表
      IntTime: null, // 是否支付成功，计时器
      disabled: false,  // 支付按钮是否禁用
      notpayBool: true, // 生成二维码只调用一次
      orderData: '',    // 订单号，请求生成订单和支付接口的数据
      orderCode: '',    // 生成的订单号
    }
  },
  components: {
    paymentTitleBar
  },
  methods: {
    // 退出登陆
    logout() {
      this.$Cookie.removeCookie('token');   //删除token
      this.$Cookie.removeCookie('userID');  //删除用户id
      this.$Cookie.removeCookie('strData'); //删除微信二维码的随机数
      this.$Cookie.removeCookie('userLevel'); //删除用户等级
      this.$store.commit('header', {nameBool: true, userName: ''});  //header组件，用户名，隐藏用户名，赋值空
      this.$store.commit('goods', []);  //购物车数量赋值空
    },
    // 订单显示隐藏
    orderChe() {
      this.orderBool = this.orderBool ? false : true;
    },
    // 倒计时
    timeFormat(param) {
      // 小于10，数值前面加0，大于10，值就不改变
      return param < 10 ? '0' + param : param;
    },
    
    // 生成二维码
    qrcode(url) {
      new QRCode('qrcode', {
        width: 200,  
        height: 200,
        text: url, // 二维码地址
        correctLevel: QRCode.CorrectLevel.Q,  //降低检验级别
      })
      document.getElementById("qrcode").removeAttribute('title');
    },
    // 关闭微信二维码
    closeQrCode() {
      var _this = this;
      clearInterval(_this.IntTime);   // 清除判断是否支付成功定时器
      _this.disabled = true;  // 微信支付按钮禁用
      // 关闭后，延时1秒再接触支付按钮的禁用，防止点击频繁
      setTimeout(function(){
        _this.disabled = false;  // 支付按钮解除禁用
      }, 1000)
      _this.dialogTableVisible = false;  // 关闭弹框
      _this.$refs.qrcode.innerHTML = ''; // 清空弹框内容
      _this.notpayBool = true;
    },
    // 微信支付
    weixin() {
      var _this = this;
      _this.disabled = true;  // 微信支付按钮禁用
    },
    // 支付宝支付
    zhifubao() {
      this.disabled = true;
      this.funCode();
    },
    // 银联，银行卡支付
    yinlian() {
      this.disabled = true;
      // this.OverduePaymentProcessing();
    },
    // 生成订单号
    funCode() {
      let Mran = '';
      let time = new Date();
      let orderTime = time.getFullYear() + '' + this.timeFormat(time.getMonth()+1) + this.timeFormat(time.getDate()) + this.timeFormat(time.getHours()) + this.timeFormat(time.getMinutes()) + this.timeFormat(time.getSeconds());
      // 6位随机数
      for (let j = 0; j < 6; j++) {
        Mran += Math.floor(Math.random() * 10);
      }
      this.orderCode = 'EE' + orderTime + (Mran); // 虚假订单号，不显示，只请求数据使用

    },
  },
  filters: {
    // 价格，保留两位小数
    decimal(n) {
      return n.toFixed(2);
    },
    // 遮掩手机号码
    coverUp(n) {
      return (n.substring(0, 3) + "****" + n.substr(-4, 4));  // 手机号码，进行遮掩变成*
    },
  },
  created() {
    var _this = this;
    let tranArr = _this.$store.state.pointsOrderData;  // vuex的积分商品信息
    _this.orderInformation = tranArr;
  },

}
</script>

<style lang="less" scoped>
p,h3,h4{margin: 0px;padding: 0px;}
#Cashier {
  min-width: 960px;
}
.el-icon-arrow-down {
  color: black;
}
// 主体
.cashier_subject {
  width: 53%;
  padding: 20px;
  padding-top: 50px;
  border: 1px solid #ccc;
  border-top: 0px;
  min-width: 960px;
  margin: auto;
  margin-bottom: 100px;
  
  .ca_order {
    // border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    
    
    .ca_order_left {
      position: relative;
      .img_icon {
        // display: inline-block;
        font-size: 40px;
        position: absolute;
        color: #83c44e;
        top: 5px;
        left: 0px;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 45px;
        border: 2px solid #83c44e;
        border-radius: 50%;
      }
      .order_left_p {
        padding-left: 70px;
        span {
            color: #ff4d4d;
        }
        p {
          margin: 5px;
          margin-top: 18px;
        }
      }
      
    }
    .ca_order_right {
      text-align: right;
      h4 {
        color: #666;
        margin-top: 5px;
        margin-bottom: 10px;
        font-size: 15px;
        span {
          color: #ff4d4d;
          font-size: 20px;
        }
        .money {
          display: inline-block;
        }
      }
      span {
        cursor: pointer;
        color: #666;
        text-decoration: none;
        font-size: 13px;
      }
      
    }
  }
}
.ca_show {
  border-top: 1px solid #ccc;
  padding-top: 15px;
  margin-bottom: 50px;
  p {
    margin-top: 10px;
    font-size: 14px;
    margin-bottom: 5px;
  }
  .text_b {
    width: 25px;
    display: inline-block;
  }
  .ca_shop{
    width: 70px;
    float: left; 
    line-height: 30px;
  }
  .table_div {
      line-height: 30px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }

  // .invoice {
  //   margin-top: 5px;
  //   line-height: 30px;
  // }
}
.ca_payment {
  margin-top: 100px;
  margin-bottom: 50px;
  h4 {
    margin-bottom: 40px;
    font-size: 20px;
  }
  ul {
    display: flex;
    li {
      width: 150px;
      border: 1px solid #ccc;
      text-align: center;
      height: 69px;
      margin-left: 45px;
      button {
        // cursor: pointer;
        width: 100%;
        height: 100%;
        text-decoration: none;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
  }
  
}
.select_products {
  width: 950px;
  margin: auto;
  padding: 60px 60px;
  text-align: center;
  // padding-bottom: 100px;
  h3 {
    margin-top: 30px;
    margin-bottom: 25px;
  }
  a {
    margin: 0px 15px;
  }
}
/deep/ .el-dialog {
  margin-top: 21vh !important;
  width: 450px;
}
/deep/ .el-dialog__body {
  padding-top: 15px;
}
#qrcode {
  display: inline-block;
  margin-left: 100px;
  margin-top: 35px;
  margin-bottom: 40px;
}
</style>